<template>
  <el-aside
    class="menu-component"
    id="menu"
    :style="{ width: !isCollapse ? '80px' : '260px' }"
    @mouseenter.native="collapseOpen"
    @mouseleave.native="collapseClose"
    @mouseover.native="collapseOver"
  >
    <!-- :style="{ width: isCollapse ? '80px' : '260px' }" -->
    <div
      class="aside-header"
      :style="{ width: !isCollapse ? '80px' : '224px' }"
    >
      <div
        class="aside-header_left"
        :style="{ 'justify-content': isCollapse ? 'initial' : 'center' }"
      >
        <el-image
          :src="user.siteLogo ? user.siteLogo : logo"
          class="logo" 
        ></el-image>
        <div class="title" v-if="isCollapse">
          {{ user.siteName ? user.siteName : "精卫安" }}
        </div>
      </div>
      <i
        v-if="isCollapse"
        @click.stop="onFold"
        :class="!config.isFold ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
        class="aside-header_right"
      ></i>
    </div>

    <el-menu
      :default-active="defaultActive"
      unique-opened
      background-color="#304156"
      text-color="#fff"
      @select="handleSelect"
      class="menu-box"
      :collapse-transition="false"
      :collapse="!isCollapse"
      active-text-color="#cfe9ff"
      mode="vertical"
      router
      menu-trigger="click"
    >
      <el-submenu
        v-for="item in menuList"
        :key="item.id"
        v-if="item.children.length > 0"
        :index="item.id + ''"
        class="el_submenu"
      >
        <template slot="title" style="display: flex; align-items: center">
          <!-- <img :src="item.src" alt="" style="width: 18px;height: 18px;margin-right: 8px;"> -->
          <!-- <svg-icon :icon-file-name="item.src" style="margin-right: 8px; font-size: 22px; vertical-align: middle" /> -->
          <i :class="[ item.icon, 'secondIcon2']"></i>
          <span slot="title" style="vertical-align: middle">{{
            item.name
          }}</span>
        </template>
        <!-- 二级 -->
        <el-menu-item
          v-for="list in item.children"
          :key="list.index"
          :route="list.url"
          :index="list.url"
          @click="handselect(list)"
        >
          <i class="iconfont xingzhuang-tuoyuanxing secondIcon"></i>
          <span>{{ list.name }}</span>
        </el-menu-item>
      </el-submenu>
      <!-- 无子级 -->
      <el-menu-item :index="item.url" v-else @click="handselect(item)">
        <!-- <i :class="item.icon" style="margin-right: 5px; font-size: 16px"></i> -->
        <!-- <img :src="item.src" alt="" style="width: 18px;height: 18px;margin-right: 8px;"> -->
        <svg-icon
          :icon-file-name="item.src"
          style="margin-right: 8px; font-size: 22px; vertical-align: middle"
        />
        <span slot="title" style="vertical-align: middle">{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import asc from "@utils/asc.js";

export default {
  name: "menus",
  data() {
    return {
      defaultActive: "",
      bgColor: "#283046",
      // isFold: false,
      logo: require("@assets/images/logo4.png"),
      collapseBtnClick: false,
      isFakeFold: false,
      i: 0,
      // isCollapse: true, //默认折叠
      isSlideIn: false, //是否滑动进入菜单

      menuList: [],
    };
  },
  computed: {
    ...mapState(["config", "user"]),
    isCollapse() {
      return this.config.isFold || this.isSlideIn;
    },
    isWhiteTheme() {
      return this.config.isWhiteTheme;
    },
  },
  watch: {
    // 监听主题切换
    isWhiteTheme(val) {
      // console.log(val);
      // svg图标使用
      this.user.permissions.findIndex((item) => {
        // console.log(item);
        // 白色主题
        // if (val) {
        //   if (item.name == "系统首页") {
        //     item.src = "shouye1";
        //   } else if (item.name == "系统设置") {
        //     item.src = "xitong1";
        //   } else if (item.name == "建筑物管理") {
        //     item.src = "danwei1";
        //   } else if (item.name == "接警人") {
        //     item.src = "jiejingren1";
        //   } else if (item.name == "告警管理") {
        //     item.src = "liebiao1";
        //   } else if (item.name == "建筑物") {
        //     item.src = "jianzhu1";
        //   } else if (item.name == "防疫管理") {
        //     item.src = "fangyi1";
        //   } else if (item.name == "物联网设备") {
        //     item.src = "wulian1";
        //   } else if (item.name == "日志管理") {
        //     item.src = "rizhi1";
        //   } else if (item.name == "智能终端") {
        //     item.src = "zhineng1";
        //   } else if (item.name == "租户管理") {
        //     item.src = "zuhu1";
        //   } else if (item.name == "行政单位管理") {
        //     item.src = "xingzheng1";
        //   } else if (item.name == "消息通知") {
        //     item.src = "service1";
        //   } else if (item.name == "隐患处置") {
        //     item.src = "hiddenDanger1";
        //   } else if (item.name == "维保管理") {
        //     item.src = "maintenance";
        //   } else if (item.name == "规则引擎") {
        //     item.src = "rule1";
        //   } else if (item.name == "统计管理") {
        //     item.src = "tongji1";
        //   } else if (item.name == "产品接入") {
        //     item.src = "access1";
        //   } else if (item.name == "白云区烟感监管") {
        //     item.src = "baiyunArea1";
        //   } else if (item.name == "组织机构管理") {
        //     item.src = "enterprise1";
        //   } else if (item.name == "任务管理") {
        //     item.src = "task1";
        //   } else if (item.name == "订阅管理") {
        //     item.src = "dinyue1";
        //   }
        // } else {
        //   if (item.name == "系统首页") {
        //     item.src = "shouye";
        //   } else if (item.name == "系统设置") {
        //     item.src = "xitong";
        //   } else if (item.name == "建筑物管理") {
        //     item.src = "danwei";
        //   } else if (item.name == "接警人") {
        //     item.src = "jiejingren";
        //   } else if (item.name == "告警管理") {
        //     item.src = "liebiao";
        //   } else if (item.name == "建筑物") {
        //     item.src = "jianzhu";
        //   } else if (item.name == "防疫管理") {
        //     item.src = "fangyi";
        //   } else if (item.name == "物联网设备") {
        //     item.src = "wulian";
        //   } else if (item.name == "日志管理") {
        //     item.src = "rizhi";
        //   } else if (item.name == "智能终端") {
        //     item.src = "zhineng";
        //   } else if (item.name == "租户管理") {
        //     item.src = "zuhu";
        //   } else if (item.name == "行政单位管理") {
        //     item.src = "xingzheng";
        //   } else if (item.name == "消息通知") {
        //     item.src = "service";
        //   } else if (item.name == "隐患处置") {
        //     item.src = "hiddenDanger";
        //   } else if (item.name == "维保管理") {
        //     item.src = "maintenance1";
        //   } else if (item.name == "规则引擎") {
        //     item.src = "rule";
        //   } else if (item.name == "统计管理") {
        //     item.src = "tongji";
        //   } else if (item.name == "产品接入") {
        //     item.src = "access";
        //   } else if (item.name == "白云区烟感监管") {
        //     item.src = "baiyunArea";
        //   } else if (item.name == "组织机构管理") {
        //     item.src = "enterprise";
        //   } else if (item.name == "任务管理") {
        //     item.src = "task";
        //   } else if (item.name == "订阅管理") {
        //     item.src = "dinyue";
        //   }
        // }
      });

      this.$forceUpdate(); //这不会更新您拥有的任何计算属性,调用forceUpdate只会强制重新渲染视图
    },
    // isFoldBySotre: {
    //   handler(val) {
    //     this.isFold = val;
    //   },
    //   immediate: true,
    // },
    // 监听路由变化(网页回退时tag重现)
    $route(to) {
      let obj = {};
      // let hash = window.location.hash.split("#", 2)[1];
      // let hash = window.location.pathname.slice(6);
      let hash = window.location.pathname;
      let segments = hash.split("/"); // ["", "productType", "list", "index", "1503927023020938595"]
      // 菜单高亮选中逻辑
      if (hash == "/mountPointsDefine/list") {
        this.defaultActive = "/org/list"; //建筑物管理
      } else if (segments.slice(1, 4).join("/") === "productType/list/index") {
        this.defaultActive = "/device/product"; //产品
      } else if (segments.slice(1, 4).join("/") === "system/dictData/index") {
        this.defaultActive = "/system/dict"; //字典
      } else {
        this.defaultActive = to.path;
      }
      // 菜单
      this.user.permissions.findIndex((item) => {
        if (item.url == hash) {
          obj = item;
          return;
        } else if (item.children && item.children.length > 0) {
          item.children.findIndex((items) => {
            if (items.url == hash) {
              obj = items;
            }
          });
        }
      });

      if (hash == "/personal/list") {
        obj = {
          url: "/personal/list",
          name: "个人中心",
        };
      } else if (segments.slice(1, 4).join("/") === "productType/list/index") {
        obj = {
          url: hash,
          name: "产品详情",
        };
      } else if (segments.slice(1, 4).join("/") === "system/dictData/index") {
        obj = {
          url: hash,
          name: "字典数据",
        };
      } else if (hash == "/mountPointsDefine/list") {
        obj = {
          url: "/mountPointsDefine/list",
          name: "安装点详情",
        };
      }
      // else if (hash == "/device/host") {
      //   obj = {
      //     url: "/device/host",
      //     name: "设备详情",
      //   };
      //   this.defaultActive = "/device/list";
      // }
      this.$store.commit("selectMenu", obj);
    },
  },
  methods: {
    ...mapMutations(["saveIsFold"]),
    // 点击菜单
    handselect(list) {
      this.$store.commit("selectMenu", list);
    },
    // 菜单激活回调
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      // 白色主题
      if (this.isWhiteTheme) {
        if (key == "/home") {
          this.user.permissions.findIndex((item) => {
            if (item.name == "系统首页") {
              item.src = "shouye";
            }
          });
        } else {
          this.user.permissions.findIndex((item) => {
            if (item.name == "系统首页") {
              item.src = "shouye1";
            }
          });
        }
      }
    },
    onFold() {
      // if (this.isStaying) {
      //   switch (this.isFakeFold) {
      //     case true:
      //       this.collapseBtnClick = true;
      //       this.i = 0;
      //       this.isFold = false;
      //       this.isFakeFold = false;
      //       break;
      //     case false:
      //       this.collapseBtnClick = false;
      //       this.i = 0;
      //       this.isFold = true;
      //       this.isFakeFold = true;
      //   }
      // }
      this.saveIsFold(!this.config.isFold);
      // this.$parent.onFold(this.isFold);
    },
    collapseOpen() {
      // if (this.collapseBtnClick) return;
      // this.saveIsFold(false);
      this.isSlideIn = true;
    },
    collapseClose() {
      this.isSlideIn = false;
      // if (this.collapseBtnClick) return;
      // this.saveIsFold(true);
      // this.isStaying = false;
      // this.i = 0;
    },
    // 滑动时
    collapseOver() {
      if (this.i < 1) {
        if (this.config.isFold) {
          this.isFakeFold = true;
        } else {
          this.isFakeFold = false;
          this.collapseBtnClick = true;
        }
        this.i += 1;
      }
      this.isStaying = true;
    },
  },

  created() {
    // console.log(this.config.isFold);
    // console.log(this.isWhiteTheme, "主题");
    let menuList = [];
    menuList = JSON.parse(JSON.stringify(this.user.permissions));
    menuList = menuList.map((item) => {
      if (item.name === "物联网设备" && Array.isArray(item.children)) {
        item.children = item.children.filter(
          (citem) => citem.name !== "设备详情"
        );
      }
      return item;
    });
    this.menuList = menuList;
    // 一开始就获取当前路由路径(刷新还在)
    this.defaultActive = window.location.pathname;
    let obj = {};
    let hash = window.location.pathname;
    // 菜单
    this.user.permissions.findIndex((item) => {
      // console.log(item);
      // 白色主题
      // if (this.isWhiteTheme) {
      //   // console.log(123);
      //   if (item.name == "系统首页") {
      //     // 判断当前路由路径
      //     if (this.defaultActive == "/home") {
      //       item.src = "shouye";
      //     } else {
      //       item.src = "shouye1";
      //     }
      //   } else if (item.name == "系统设置") {
      //     item.src = "xitong1";
      //   } else if (item.name == "建筑物管理") {
      //     item.src = "danwei1";
      //   } else if (item.name == "接警人") {
      //     item.src = "jiejingren1";
      //   } else if (item.name == "告警管理") {
      //     item.src = "liebiao1";
      //   } else if (item.name == "建筑物") {
      //     item.src = "jianzhu1";
      //   } else if (item.name == "防疫管理") {
      //     item.src = "fangyi1";
      //   } else if (item.name == "物联网设备") {
      //     item.src = "wulian1";
      //   } else if (item.name == "日志管理") {
      //     item.src = "rizhi1";
      //   } else if (item.name == "智能终端") {
      //     item.src = "zhineng1";
      //   } else if (item.name == "租户管理") {
      //     item.src = "zuhu1";
      //   } else if (item.name == "行政单位管理") {
      //     item.src = "xingzheng1";
      //   } else if (item.name == "消息通知") {
      //     item.src = "service1";
      //   } else if (item.name == "隐患处置") {
      //     item.src = "hiddenDanger1";
      //   } else if (item.name == "维保管理") {
      //     item.src = "maintenance";
      //   } else if (item.name == "规则引擎") {
      //     item.src = "rule1";
      //   } else if (item.name == "统计管理") {
      //     item.src = "tongji1";
      //   } else if (item.name == "产品接入") {
      //     item.src = "access1";
      //   } else if (item.name == "白云区烟感监管") {
      //     item.src = "baiyunArea1";
      //   } else if (item.name == "组织机构管理") {
      //     item.src = "enterprise1";
      //   } else if (item.name == "任务管理") {
      //     item.src = "task1";
      //   } else if (item.name == "订阅管理") {
      //     item.src = "dinyue1";
      //   }
      // } else {
      //   if (item.name == "系统首页") {
      //     item.src = "shouye";
      //   } else if (item.name == "系统设置") {
      //     item.src = "xitong";
      //   } else if (item.name == "建筑物管理") {
      //     item.src = "danwei";
      //   } else if (item.name == "接警人") {
      //     item.src = "jiejingren";
      //   } else if (item.name == "告警管理") {
      //     item.src = "liebiao";
      //   } else if (item.name == "建筑物") {
      //     item.src = "jianzhu";
      //   } else if (item.name == "防疫管理") {
      //     item.src = "fangyi";
      //   } else if (item.name == "物联网设备") {
      //     item.src = "wulian";
      //   } else if (item.name == "日志管理") {
      //     item.src = "rizhi";
      //   } else if (item.name == "智能终端") {
      //     item.src = "zhineng";
      //   } else if (item.name == "租户管理") {
      //     item.src = "zuhu";
      //   } else if (item.name == "行政单位管理") {
      //     item.src = "xingzheng";
      //   } else if (item.name == "消息通知") {
      //     item.src = "service";
      //   } else if (item.name == "隐患处置") {
      //     item.src = "hiddenDanger";
      //   } else if (item.name == "维保管理") {
      //     item.src = "maintenance1";
      //   } else if (item.name == "规则引擎") {
      //     item.src = "rule";
      //   } else if (item.name == "统计管理") {
      //     item.src = "tongji";
      //   } else if (item.name == "产品接入") {
      //     item.src = "access";
      //   } else if (item.name == "白云区烟感监管") {
      //     item.src = "baiyunArea";
      //   } else if (item.name == "组织机构管理") {
      //     item.src = "enterprise";
      //   } else if (item.name == "任务管理") {
      //     item.src = "task";
      //   } else if (item.name == "订阅管理") {
      //     item.src = "dinyue";
      //   }
      // }

      if (item.url == hash) {
        obj = item;
        return;
      } else if (item.children && item.children.length > 0) {
        item.children.findIndex((items) => {
          if (items.url == hash) {
            obj = items;
          }
        });
      }
    });
    let segments = hash.split("/"); // ["", "productType", "list", "index", "1503927023020938595"]
    if (hash == "/personal/list") {
      obj = {
        url: "/personal/list",
        name: "个人中心",
      };
    } else if (segments.slice(1, 4).join("/") === "productType/list/index") {
      obj = {
        url: hash,
        name: "产品详情",
      };
      this.defaultActive = "/device/product";
    } else if (segments.slice(1, 4).join("/") === "system/dictData/index") {
      obj = {
        url: hash,
        name: "字典数据",
      };
      this.defaultActive = "/system/dict";
    } else if (hash == "/mountPointsDefine/list") {
      obj = {
        url: "/mountPointsDefine/list",
        name: "安装点详情",
      };
      this.defaultActive = "/org/list";
    }
    this.$store.commit("selectMenu", obj);
  },
};
</script>

<style scoped lang="less">
.menu-component {
  height: 100%;
  width: 260px;
  transition: all 0.6s ease;

  .aside-header {
    z-index: 10;
    width: 224px;
    height: 63px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    box-shadow: @primaryHeaderBgcolor2;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    padding-top: 20px;
    // background-color: pink;

    .aside-header_left {
      display: flex;
      // width: 127px;
      width: 200px;
      align-items: center;

      .title {
        color: #7367f0;
        font-weight: 600;
        letter-spacing: 0.01rem;
        font-size: 1.45rem;
        padding-left: 16px;
      }
    }

    .aside-header_right {
      color: #7367f0 !important;
      font-size: 20px;
      cursor: pointer;
    }
  }

  .logo {
    width: 30px;
    height: 30px;
  }
}

.firstIcon {
  margin-right: 14px;
  color: @primaryThemeTxtColor !important;
  font-size: 20px;
}

::v-deep .el-menu-item.is-active i {
  color: #f6f6f6 !important;
}

.secondIcon {
  margin-right: 14px;
  color: @primaryThemeTxtColor !important;
  font-size: 11px;
}

.menu-box {
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 22px;
}

::v-deep .el-menu {
  border-right: none;
  height: calc(100% - 63px);
  overflow: auto;
  background: @primaryHeaderBgcolor2 !important;
}

::v-deep .el-menu-item {
  height: 43px;
  line-height: 43px;
  transition: padding 0.3s ease;
  padding: 0 0 0 20px;
  margin-bottom: 6px !important;
  background: @primaryHeaderBgcolor2 !important;
  color: @primaryThemeTxtColor !important;

  max-width: 230px;
  margin: 0 auto;

  &:hover {
    padding-left: 45px !important;
    // background-color: rgba(0, 0, 0, 0) !important;
    // background-color: #343951 !important;
    transition: padding 0.3s ease;
  }
}

// 单独修改二级菜单
.el_submenu .el-menu-item {
  // padding: 0 0 0 45px !important;
}

::v-deep .el-menu-item.is-active {
  background: linear-gradient(
    118deg,
    #7367f0,
    rgba(115, 103, 240, 0.7)
  ) !important;
  // box-shadow: 0 0 10px 1px rgb(115 103 240 / 70%) !important;
  box-shadow: 0 0 10px 1px ~"rgb(115 103 240 / 70%)";
  border-radius: 4px !important;
  color: #f6f6f6 !important;
}

::v-deep .el-submenu__title {
  height: 43px;
  line-height: 43px;
  transition: padding 0.3s ease;
  padding: 0 0 0 20px !important;
  margin-bottom: 6px !important;
  color: @primaryThemeTxtColor !important;
  background: @primaryHeaderBgcolor2 !important;
  font-size: 15px;

  max-width: 230px;
  margin: 0 auto;

  &:hover {
    // padding-left: 26px !important;
    background-color: rgba(0, 0, 0, 0) !important;
    transition: padding 0.3s ease;
  }
}

::v-deep .el-submenu.is-active .el-submenu__title {
  border-bottom-color: #409eff;
  background-color: @primaryMenuItem2 !important;
  border-radius: 4px !important;
  color: @primaryMenuItem3 !important;
  // font-weight: 600;
}

::v-deep .el-submenu__icon-arrow {
  right: 14px;
}

// 图标
.el-submenu__title i {
  margin-right: 5px !important;
  font-size: 18px;
}
.secondIcon2 {
  color: @primaryThemeTxtColor;
  // font-size: 22px;
  margin-right: 5px !important;
  font-size: 18px;
}
</style>
